<template>
  <!-- 精选答疑 -->
  <view class="container pa-16">
    <view class="disFlxJS">
      <text class="fz-16 default-color font-bold">精选答疑（{{ total }}）</text>
      <view v-if="isValid" class="disFlxCC">
        <TButton
          v-if="manage"
          text="答疑管理"
          type="none"
          :icon="'\ue634'"
          :custom-style="{
            display: 'inline-block',
            color: '#2878FF',
          }"
          custom-class="h-32 linh-32 br-16 px-12"
          @click="toManage"
        />
        <TButton
          v-else
          text="我要提问"
          type="primary"
          :icon="'\ue687'"
          :custom-style="{
            display: 'inline-block',
          }"
          custom-class="h-32 linh-32 br-16 px-12"
          @click="modalVisible = true"
        />
      </view>
    </view>
    <view class="problem-list">
      <template v-for="(v, i) in list" :key="i">
        <view class="disFlx mt-12">
          <TImage
            class="flex-shrink-0"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/problem-icon.png"
            width="40rpx"
            height="40rpx"
          />
          <view
            class="flex-1 ov-2 ml-8 fz-16 font-bold default-color"
            style="word-break: break-all"
          >
            <text>{{ v?.content }}</text>
          </view>
          <!-- <text class="color1 flex-shrink-0">{{ v.replyCount }}个回答</text> -->
        </view>
        <view class="color1 fz-14 ml-28 mt-8">
          <text>{{ dateUtil().to(v?.createTime) }}</text>
        </view>
        <!-- 回答 -->
        <view v-if="v?.replyContent" class="disFlx br-8 pl-28 mt-12">
          <TImage
            class="flex-shrink-0"
            src="https://hb-saas.obs.cn-south-1.myhuaweicloud.com/mall/saas/answer-icon.png"
            width="40rpx"
            height="40rpx"
          />
          <view class="flex-1 ov-3 ml-8 fz-14" style="color: #646566; word-break: break-all">
            <text>
              {{ v?.replyContent }}
            </text>
          </view>
        </view>
        <view class="color1 fz-14 mt-8 mb-12" style="margin-left: 116rpx">
          <text>{{ dateUtil().to(v?.replyTime) }}</text>
        </view>
        <view
          v-if="i < list.length - 1"
          class="h-2"
          style="background: #ebedf0; width: 100%"
        ></view>
      </template>

      <view v-if="!list.length" class="fz-14 color1 fontTC problem-list__empty mb-12">
        <text>暂无答疑内容，有问题可以向发布者提问哦~</text>
      </view>
    </view>

    <view v-if="list.length" class="fz-14 color1 disFlxJC pt-12" @click="toList">
      <text>查看全部答疑</text>
      <text class="ali-icon">&#xe67b;</text>
    </view>

    <ShowModal
      v-model="modalVisible"
      title="向发布者提问"
      content-width="100%"
      cancel-text="取消"
      confirm-text="发送问题"
      confirm-color="#2878FF"
      :confirm-auto-close="false"
      @confirm="handleConfirm"
    >
      <template #content>
        <view class="pa-20" style="width: 100%">
          <view class="fz-14 mb-16" style="color: #969799">
            <text>请简要说明您要询问的问题</text>
          </view>
          <view style="background-color: #f2f3f5">
            <UniEasyinput v-model="questionsVal" type="textarea" placeholder="请输入" />
          </view>
        </view>
      </template>
    </ShowModal>
  </view>
</template>

<script setup lang="ts">
  import TButton from '@/components/TButtonGroup/TButton.vue';
  import { propTypes } from '@/utils/propTypes';
  import TImage from '@/components/TImage/index.vue';
  import { navigateTo } from '@/router';
  import ShowModal from '@/components/ShowModal/index.vue';
  import UniEasyinput from '@/uni_modules/uni-easyinput/components/uni-easyinput/uni-easyinput.vue';
  import { ref, type PropType } from 'vue';
  import { creatingQuestions, selectedAnswersList } from '@/api/businessOpportunities';
  import type { IAnsweringQuestionsResult } from '@/api/businessOpportunities/type';
  import { Toast } from '@/utils';
  import type { BoTypeEnum } from '@/enums/businessOpportunitiesEnum';
  import { dateUtil } from '@/utils/dateUtil';
  const props = defineProps({
    id: propTypes.number.isRequired,
    manage: propTypes.bool.def(false),
    /** 供需是否有效 */
    isValid: propTypes.bool.def(true),
    /** 供需标题 */
    title: propTypes.string,
    /** 供需类型 */
    boType: Number as PropType<BoTypeEnum>,
  });

  const list = ref<IAnsweringQuestionsResult[]>([]);
  const total = ref<number>(0);

  function getList() {
    selectedAnswersList({ boInfoId: props.id, current: 1, size: 2 }).then((res) => {
      list.value = res.records;
      total.value = res.total;
    });
  }

  getList();

  const modalVisible = ref(false);
  const questionsVal = ref('');
  const handleConfirm = () => {
    if (!questionsVal.value) return Toast('请输入');
    creatingQuestions({
      boInfoId: props.id,
      content: questionsVal.value,
    }).then(() => {
      getList();
      modalVisible.value = false;
      questionsVal.value = '';
      setTimeout(() => {
        uni.showModal({
          title: '问题提交成功！',
          content:
            '您的问题已成功发送给发布者！请耐心等待发布者回复。可前往【我的】-【我的供需】-【我提交的问题】查看问题回复情况。',
          confirmText: '我知道了',
          showCancel: false,
        });
      }, 300);
    });
  };

  function toList() {
    navigateTo({
      name: 'answeringQuestionsList',
      options: { id: props.id, showSubmit: props.isValid },
    });
  }

  function toManage() {
    navigateTo({
      name: 'singleQuestionManage',
      options: {
        id: props.id!,
        boType: props.boType!,
        title: props.title!,
      },
    });
  }
</script>

<style lang="scss" scoped>
  .container {
    background-color: #fff;
    .problem-list {
      min-height: 100rpx;
      &__empty {
        height: 100rpx;
        line-height: 100rpx;
      }
    }
  }
  .color1 {
    color: #969799;
  }
</style>
